<template>
    <div class="login_panel">
        <!-- logo部分 -->
<!--        <div class="logo">-->
<!--            <img src="./../../icons/反白logo@2x.png" width="200" height="40" alt="">-->
<!--        </div>-->
        <!-- 登录窗口 -->
        <div class="login_box">
            <img src="../../images/wenone.png" width="19" height="17" alt="" class="one">
            <img src="../../images/wentwo.png" width="58" height="50" alt="75" class="two">
            <p class="lg_title">智能表单</p>
            <p class="welcome">在这里注册</p>
            <div v-show="oneOrTwo" class="login_form">
                <div class="emailCent">
                    <p class="emailTip">请输入注册邮箱</p>
                    <input type="email" class="emailIn" placeholder="" v-model="email">
                    <img class="chahao" v-show="emailTip" src="http://api-lunacy.icons8.com/api/assets/cd1f1a92-8a2b-4c51-af59-55c733cc9dfb/btn_x.png" alt="">
                    <span class="tips">未注册邮箱</span>
                </div>
                <div class="passwordCent">
                    <p class="passwTip">请输入密码</p>
                    <input type="text" class="passwordIn" v-model="password" v-if="Passwordshow">
                    <input type="password" class="passwordIn" v-model="password" v-else>
                    <img class="chahao" v-show="passwordTip" @click="clearCont('password')" src="http://api-lunacy.icons8.com/api/assets/cd1f1a92-8a2b-4c51-af59-55c733cc9dfb/btn_x.png" alt="">
                    <img class="visibles" @click="togglePassword" src="http://api-lunacy.icons8.com/api/assets/b984f56e-9105-4314-a202-66ce3326aa52/btn_睁眼.png" alt="">
                    <span class="tips">密码错误</span>
                </div>
                <div class="confirmCent">
                    <p class="passwTip">请输入验证码</p>
                    <input type="text" class="passwordIn" v-model="codeConfirm">
                    <img :src="imgCode" alt="" @click="refresh">
                    <span class="tips">验证码错误</span>
                </div>
            </div>
            <div v-show="oneOrTwo" class="goinNow" @click="sendEmail">
                立即注册
            </div>
            <div v-show="oneOrTwo" class="thirdLogin">
                <hr> <span>更多登录方式</span>
                <hr>
            </div>
            <div v-show="oneOrTwo" class="weixinAndQQ">
                <img src="../../images/weixin.png" alt="">
                <img src="../../images/qq.png" alt="">
            </div>
            <div v-show="!oneOrTwo" class="sendTwo">
                <p>我们发送了一封激活邮件到您的邮箱</p>
                <span>ggggxxllaadd@qq.com</span>
                <p> 请<span>前往邮箱</span> 点击激活链接完成注册</p>
                <div @click="sendEmailAgian" v-show="show">重新发送激活邮件</div>
                <div v-show="!show" class="count">{{count}} s</div>
                <h5 @click="goback">返回 &nbsp; 注册</h5>
            </div>
            <div class="login_bottom" @click="gotoLogin">
                <p class="gotoRegister">已经有账号了？ 去登录</p>
            </div>
        </div>
    </div>
</template>

<script>
    import api from "../../public/api/api";
    import {Message} from "element-ui";

    export default {
        data() {
            return {
                oneOrTwo: true,
                email:'',
                emailTip:false,
                password:'',
                codeConfirm:'',
                passwordTip:false,
                Passwordshow:false,
                imgCode:'',
                uuid:'',
                show:true,
                count:'',
                timer: null,
            };
        },
        watch:{
            email:function (val) {
                if(val.length>0){
                    this.emailTip=true
                }
            },
            password:function (val) {
                if(val.length>0){
                    this.passwordTip=true
                }
            }
        },
        mounted() {
            this.refresh()
        },
        methods: {
            clearCont(val){
                if(val=='email'){
                    this.email=''
                }else{
                    this.password=""
                }
            },
            refresh(){
                    var that=this;
                    api.post('get','api/common/captcha?config=register')
                    .then(function (response) {
                        console.log(response);
                        that.imgCode=response.data.image;
                        that.uuid=response.data.uuid;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            togglePassword(){
                this.Passwordshow=!this.Passwordshow
            },
            sendEmail(){
                // this.oneOrTwo=!this.oneOrTwo;
                var that=this;
                var params={
                    'name': 'hemengze',
                    'password_confirmation': that.password,
                    'email': that.email,
                    'password': that.password,
                    '__captcha_uuid':that.uuid,
                    '__captcha_code':that.codeConfirm,
                }
                api.post('Post','/api/auth/register',params ,'formData')
                    .then(function (response) {
                        console.log(response);
                        console.log(params);
                        Message.success('注册成功');
                        // setTimeout(function () {
                        //     that.$router.push("/login")
                        // },500)
                        that.oneOrTwo=!that.oneOrTwo;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            goback(){
                this.oneOrTwo=!this.oneOrTwo;
            },
            gotoLogin(){
                this.$router.push("/login")
            },
            getCode(){
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
            sendEmailAgian(){
                var that=this;
                var params={
                    '__captcha_uuid':that.uuid,
                    '__captcha_code':that.codeConfirm,
                }
                api.post('Post','api/auth/resend', {
                    '__captcha_uuid':that.uuid,
                    '__captcha_code':that.codeConfirm,

                },'formData')
                    .then(function (response) {
                        console.log(response);
                        console.log(params);
                        Message.success('发送成功！');
                        that.getCode();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }
</script>

<style lang="less" scoped>
    @import url('./register.less');
</style>


